<template>
    <div>
        <el-dialog
                title="增加商品"
                @close="$emit('update:show', false)"
                :show="show"
                :visible.sync="dialogVisible">
            <div class="dialog-header flex-box" style="justify-content: space-between">
                <div class="flex-box">
                    <good-status :status.sync="goodStatus"></good-status>
                    <el-date-picker
                            v-model="goodTime"
                            type="date"
                            placeholder="创建时间"
                            value-format="yyyy-MM-dd"
                            style="width:120px">
                    </el-date-picker>
                    <el-input v-model="goodName" placeholder="商品名称" style="max-width: 150px;"></el-input>
                    <span style="display: block;min-width: 56px;text-align:right">价格区间</span>
                    <el-input placeholder="" v-model="sale_price_one" style="width:100px;"></el-input>
                    <span>—</span>
                    <el-input placeholder="" v-model="sale_price_two" style="width:100px;"></el-input>
                </div>

                <el-button type="primary" icon="el-icon-search" @click="getGoodList"></el-button>
            </div>
            <div>
                <el-table :data="goodList" v-loading="tableLoading" style="width: 100%">
                    <el-table-column :resizable="false" label="商品图">
                        <template slot-scope="scope">
                            <img :src="scope.row.image" style="width: 60px;height:60px;" v-if="scope.row.image"/>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="商品信息">
                        <template slot-scope="scope">
                            <span>{{scope.row.name}}<br>{{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="售价" prop="sale_price">
                    </el-table-column>
                    <el-table-column :resizable="false" label="状态" prop="is_on_sale">
                        <template slot-scope="scope">
                            <span v-if="scope.row.is_on_sale === 1">售卖中</span>
                            <span v-else>仓库中</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" prop="operation" label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.catList.indexOf(showId)" @click="addCate(scope.row.id,scope.row)"
                                       type="primary">添加
                            </el-button>
                            <el-button v-else @click="deleteCate(scope.row.id,scope.row)">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination" v-if="page.total">
                    <div>
                        共{{page.count}}页，每页{{pageSize}}条
                    </div>
                    <el-pagination layout="prev, pager, next" :total="page.total" :page-size="pageSize" prev-text="上一页"
                                   next-text="下一页"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import GoodStatus from '../../components/Goodstatus'

    export default {
        name: "add-good",
        components: {
            GoodStatus
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            showId: Number
        },
        data() {
            return {
                tableLoading: true,

                dialogVisible: this.show,

                goodStatus: '',
                goodTime: '',
                goodName: '',
                sale_price_one: '',
                sale_price_two: '',

                goodList: '',
                page: {
                    total: null,
                    count: null
                },
                pageSize: 5,
                current: ''
            }
        },
        watch: {
            show() {
                this.dialogVisible = this.show
            }
        },
        mounted() {
            this.getGoodList()
        },
        methods: {
            genItem(data) {
                axios
                    .get('admin_goods', {
                        params: data
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize);
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('棵', res);
                        this.goodList = res;
                        this.goodList.map(item => {
                            item.catList = item.categories.map(res => res.id)
                        });
                        console.log('整理后', this.goodList)
                        this.tableLoading = false;

                    })
            },
            getGoodList(pagination = 1) {
                const data = {
                    pagination,
                    pageSize: this.pageSize,
                    created_at: this.goodTime,
                    is_on_sale: this.goodStatus,
                    name: ['like', `%${this.goodName}%`],
                    sale_price: this.sale_price_one.length === 0 ? '' : ['between', `${this.sale_price_one},${this.sale_price_two}`],
                }
                console.log('时间', this.goodTime, '状态', this.goodStatus)
                this.genItem(data)
            },
            genData(row) {
                console.log('商品分类', this.showId)
                const element = row;
                element.cat_id = [];
                element.cat_id.push(this.showId).toString();
                element.slideshows = row.slideshow;
                element.content_images = row.contents;
                element._method = 'PUT';
                console.log('上传数据', element)
                return element;
            },
            postData(id, data) {
                return axios
                    .post(`admin_goods/${id}`, data)
                    .then(res => {
                        return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
                    });
            },
            addCate(id, row) {
                console.log('要添加的数据', id, row);
                const element = row;
                element.cat_id = [];
                element.cat_id.push(this.showId).toString();
                element.slideshows = row.slideshow;
                element.content_images = row.contents;
                element._method = 'PUT';
                this.postData(id, element)
                    .then(() => this.getGoodList(this.current))
                    .then(() => {
                        this.$message.success('添加成功！')
                    })
                    .catch(() => {
                        this.$message.error('添加失败！')
                    })
            },
            deleteCate(id, row) {
                console.log('删除数据', id, row);
                const element = row;
                element.categories.splice(element.categories.findIndex(item => item.id === this.showId), 1);
                element.cat_id = element.categories.length > 0 ? element.categories.map(item => item.id).toString() : '';
                element.slideshows = row.slideshow;
                element.content_images = row.contents;
                element._method = 'PUT';
                this.postData(id, element)
                    .then(() => this.getGoodList())
                    .then(() => {
                        this.$message.success('移除成功！')
                    })
                    .catch(() => {
                        this.$message.error('移除失败！')
                    })
            },
            handleCurrentChange(current) {
                console.log('野马', current);
                this.current = current;
                this.getGoodList(current);
            }
        }
    }
</script>

<style scoped>
    .flex-box {
        display: flex;
    }

    .dialog-header {
        padding-bottom: 20px;
        border-bottom: 1px dashed #D8D8D8;
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
    }
</style>
<style>
    .el-dialog {
        min-width: 800px;
    }

    .el-dialog__header {
        text-align: center;
        padding: 11px 20px 11px 20px;
        background: #3F7DFF;
    }

    .el-dialog__title {
        color: #FFFFFF;
    }

    .el-dialog__headerbtn {
        top: 10px;
    }
</style>